<template>
	<view class="content">
		<!-- 商品列表 -->
		<view class="items" v-if="flag">
			<view v-for="(item,index) in list" :key="index">
				<view class="item" @click="gotoDetail(item)" @tap="gotoDetail(item)">
					<image :src="item.img" mode="aspectFit"></image>
					<view>
						{{item.name}}
					</view>
					<view>
						RMB {{item.price.toFixed(2)}}
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="!flag" class="empty">
			<!-- 空白页 -->
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
				<view class="navigator">该类服饰已告罄~</view>
			</view>
		</view>
		<!-- 抽屉 -->
		<view class="my-drawer">
			<uni-drawer ref="showRight" mode="right" :mask-click="true">
				<button @click="clear" @tap="clear" type="default">清除</button>
				<button @click="finish" @tap="finish" type="primary">完成</button>
				<hr>
				<view class="infos">
					<view class="title"><b>尺寸</b></view>
					<view class="infos" v-for="(item,index) in size">
						<view class="info">
							<view :style="{backgroundColor: item.isC}" @click="isChoose1(index)" @tap="isChoose1(index)">{{item.pro}}</view>
						</view>
					</view>
					<view class="title2"><b>面料</b></view>
					<view class="infos" v-for="(item,index) in material">
						<view class="info">
							<view :style="{backgroundColor: item.isC}" @click="isChoose2(index)" @tap="isChoose2(index)">{{item.pro}}</view>
						</view>
					</view>
					<view class="title3"><b>款式</b></view>
					<view class="infos" v-for="(item,index) in style">
						<view class="info">
							<view :style="{backgroundColor: item.isC}" @click="isChoose3(index)" @tap="isChoose3(index)">{{item.pro}}</view>
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				ip:"",
				flag: true,
				typeId:"",
				list: {},
				size:[],
				material:[],
				style:[],
				sizeCondition:[],
				materialCondition:[],
				styleCondition:[],
			};
		},
		async onLoad(option) {
			// console.log(option.id)
			uni.setNavigationBarTitle({
				title: option.type
			})
			this.typeId = option.id
			this.loadData(option.id)
		},
		methods: {
			async loadData(id) {
				const ip = await this.$api.json('ip');
				this.ip=ip
				this.size = await this.$api.json('size');
				this.material = await this.$api.json('material');
				this.style = await this.$api.json('style');
				uni.request({
					url: ip + `goods/queryByTypeId?id=${id}`,
					success: (res) => {
						// console.log(res.data);
						this.list = res.data
						if (this.list[0] == undefined) {
							this.flag = false
						}
					}
				});
			},
			// 进入单个服饰详情页
			gotoDetail(item) {
				// console.log(item.id)
				uni.navigateTo({
				    url: `/pages/product/product?id=${item.id}`
				});
			},
			//收藏
			favorite() {
				this.data.favorite = !this.data.favorite;
			},
			//点击导航栏 buttons 时触发
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					// this.$api.msg('点击了筛选')
					this.$refs.showRight.open();
				}
			},
		 	async finish() {
				this.sizeCondition=await []
				this.materialCondition=await []
				this.styleCondition=await []
				for(let i=0; i<this.size.length;i++){
					if(this.size[i].isC == "#FF00A4"){
						this.sizeCondition.push(this.size[i].pro)
					}
				}
				for(let i=0; i<this.material.length;i++){
					if(this.material[i].isC == "#FF00A4"){
						this.materialCondition.push(this.material[i].pro)
					}
				}
				for(let i=0; i<this.style.length;i++){
					if(this.style[i].isC == "#FF00A4"){
						this.styleCondition.push(this.style[i].pro)
					}
				}
				uni.request({
				    url: this.ip+`/goods/queryByCondition`,
				    data: {
				        sizeConditions: this.sizeCondition,
				        materialConditions: this.materialCondition,
				        styleConditions: this.styleCondition,
						typeId: this.typeId,
				    },
				    success: (res) => {
				        // console.log(this.ip);
						this.list = res.data
						this.flag = true
						if (this.list[0] == undefined) {
							this.flag = false
						}
						console.log(res.data)
				    }
				});
				this.$refs.showRight.close();
			},
			clear(){
				let len1 = this.size.length
				let len2 = this.material.length
				let len3 = this.style.length
				for(var i = 0; i < len1;i++){
					this.size[i].isC = "#FFF"
				}
				for(var i = 0; i < len2;i++){
					this.material[i].isC = "#FFF"
				}
				for(var i = 0; i < len3;i++){
					this.style[i].isC = "#FFF"
				}
			},
			isChoose1(item){
				// console.log(item)
				// console.log(this.size[item].isC)
				this.size[item].isC=this.size[item].isC=="#FF00A4"?"#FFF":"#FF00A4"
			},
			isChoose2(item){
				// console.log(item)
				// console.log(this.item)
				if(item==8)return
				this.material[item].isC=this.material[item].isC=="#FF00A4"?"#FFF":"#FF00A4"
			},
			isChoose3(item){
				// console.log(item)
				// console.log(this.item)
				if(item==8)return
				this.style[item].isC=this.style[item].isC=="#FF00A4"?"#FFF":"#FF00A4"
			}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		display: flex;
	}

	/* 容器样式 */
	.items {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 80rpx;
		box-sizing: border-box;

		.item {
			font-size: 30rpx;

			image {
				height: 400rpx;
				width: 250rpx;
			}

			text-align: center;
			width: 250rpx;
			height: 250rpx;
			// border-bottom: 1rpx solid #D6D6D6;
			margin-top: 10rpx;
			margin-bottom: 300rpx;
		}
	}

	.content {
		padding-bottom: 134upx;

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	// 抽屉
	.uni-drawer{
	}
	.my-drawer {
		display: block;
		button {
			float: left;
			width: 40%;
			margin-top: 10rpx;
			margin: 5%;
			margin-bottom: 10rpx;
		}
		background-color: #202121;
	}
	.infos{
		.info{
			view{
				flex-wrap: nowrap;
				margin: 1%;
				float: left;
				width: 30%;
				height: 100rpx;
				border: solid 1rpx;
				line-height: 100rpx;
			}
		}
		text-align: center;
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}
</style>
